/*
 * @Author: Mark
 * @Date: 2018-09-18 08:40:49
 * @LastEditors: Mark
 * @LastEditTime: 2018-09-18 08:40:49
 * @Description: 登录模块中忘记密码页面js文件
 */
import HeaderLogin from '@/components/HeaderLogin'
import Tips from '@/utils/tipsUtil'
import User from '@/service/user-service'
const _user = new User()                  //用户模块发送请求对象
const _tips = new Tips()                  //提示信息对象



export default {
  
  data() {

    let validatePass = (rule,value,callback)=>{
      if(value === ''){
        callback(new Error('请输入新密码'))
      }else{
        if(this.newPwdForm.confirmPwd !== ''){
          this.$refs.newPwdForm.validateField('confirmPwd')
        }
        callback()
      }
    }

    let validateConfirmPwd = (rule,value,callback)=>{
      if(value === ''){
        callback(new Error('再次输入新密码'))
      }else if(value !== this.newPwdForm.newPwd){
        callback(new Error('两次输入的密码不一样'))
      }else{
        callback()
      }
    }

    return {
      data :{
        progress_percentage : 10,  //进度条的进度
        progress_status : 'fail'   //进度条的状态
      },
      usernameForm: { //用户名信息表单
        isShow: true,
        username: '',
        tips: ''
      },
      answerForm: {  //提交回答问题的表单
        isShow: false,
        question: '',
        answer: '',
        tips: ''
      },
      newPwdForm: {  //重置密码的表单
        isShow: false,
        token: '',  
        newPwd: '',
        confirmPwd: ''
      },
      successCard : { //显示重置密码成功的卡片信息
        isShow : false 
      },
      usernameFormRules: { //规则校验对象
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
      },
      answerFormRules: {
        answer: [
          {
            required: true,
            message: 'way way！回我呀！',
            trigger: 'blur'
          }
        ]
      },
      newPwdFormRules :{
        newPwd :[
          {validator : validatePass,trigger : 'blur'}
        ],
        confirmPwd : [
          {validator : validateConfirmPwd ,trigger : 'blur'}
        ]
      }
    };
  },
  components :{
    HeaderLogin
  },
  methods: {
   
    /**
     * 第一步：提交用户名 获取问题
     * @param {*} usernameForm 填写用户名的表单
     */
    firstStep(usernameForm) {
      let vue = this;
      vue.$refs[usernameForm].validate((valid) => {
        if (valid) { //验证通过

          let userinfo = { //请求的对象信息
            username: vue.usernameForm.username
          }

          _user.getQuestion(userinfo).then((res) => {
            vue.usernameForm.isShow = false
            vue.answerForm.isShow = true
            vue.answerForm.question = res.msg
            vue.data.progress_percentage = 45
          }, (err) => {
            _tips.notifyTips(vue,err.msg)
          })
        } else { 
          return false
        }
      })
    },

    /**
     * 第二步 ：回答步骤一的问题 
     * @param {*} answerForm 回答问题的表单
     */
    secondStep(answerForm) {
      let vue = this
      vue.$refs[answerForm].validate((valid) => {
        if (valid) {

          let userinfo = { 
            username: vue.usernameForm.username,
            question: vue.answerForm.question,
            answer: vue.answerForm.answer
          }

          _user.checkAnswer(userinfo).then((res) => {
            vue.answerForm.isShow = false
            vue.newPwdForm.isShow = true
            vue.newPwdForm.token = res.data
            vue.data.progress_percentage = 90
          }, (err) => {
            _tips.notifyTips(vue,err.msg)
          })
        } else {
          return false
        }

      })
    },

    /**
     * 第三步：重置密码
     * @param {*} newPwdForm 重置密码的表单对象
     */
    thirdStep(newPwdForm){
      let vue = this
      vue.$refs[newPwdForm].validate((valid) => {
        if(valid){

          let passwordInfo = {
            username : vue.usernameForm.username,
            passwordNew : vue.newPwdForm.confirmPwd,
            forgetToken : vue.newPwdForm.token
          }
          _user.resetPassword(passwordInfo).then((res)=>{
             vue.newPwdForm.isShow = false
             vue.successCard.isShow = true
             vue.data.progress_percentage = 100
             vue.data.progress_status = 'success'
             _tips.notifyTips(vue,res.msg,'success')
          },(err)=>{
            _tips.notifyTips(vue,err.msg)
          })
        }else{
          return false
        }
      })
    },

    /**
     * 登录的路由跳转
     */
    login(){
      this.$router.push({
        path : 'login'
      })
    }
  }
}